<script setup>
import OneApp from "@/components/one-app.vue";
import TwoApp from "@/components/two-app.vue";
import { ref } from "vue";

let appcounter = ref(0);
const handOneClick = (counter) => {
  console.log("app组件被点击", counter);
  appcounter.value = counter;
  twoRef.value?.btnClick(counter);
};
const twoRef = ref();
const btnClick = () => {
  twoRef.value?.btnClick();
};
</script>

<template>
  <div class="app">
    <h2>appCounter：{{ appcounter }}</h2>
    <one-app @oneClick="handOneClick" />
    <two-app ref="twoRef" :counter="appcounter" />
    <button @click="btnClick">two</button>
  </div>
</template>

<style scoped>
.app {
}
</style>